<template>
  <div>
    <login-header rightText="欢迎登录~"></login-header>
    <div class="login-wrapper flex-y-center">
      <div class="login-form">
        <div class="title flex-x-bet-y-center">
          <i
            class="el-icon-back back"
            @click="loginType = 1"
            v-show="loginType == 3 || loginType == 4"
          ></i>
          <div class="flex-1">{{ title }}</div>
          <div class="empty"></div>
        </div>
        <el-form
          ref="form"
          :rules="rules"
          :model="loginForm"
          label-width="0"
          v-if="loginType != 3"
        >
          <el-form-item label="" prop="phone">
            <img src="@/assets/img/icon-username.png" class="input-icon" alt="" />
            <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
         
          <el-form-item label="" prop="code" v-if="loginType == 2 || loginType == 4">
            <div class="flex-y-center sms-code-wrapper">
              <img src="@/assets/img/icon-sms-code.png" class="input-icon" alt="" />
              <el-input
                style="flex: 1"
                type="text"
                v-model="loginForm.code"
                placeholder="请输入验证码"
              ></el-input>
              <div class="send-code-btn" :class="{ disabled: timer }" @click="sendSms">
                {{ timer ? countdown + "s后重发" : "获取验证码" }}
              </div>
            </div>
          </el-form-item>

          <el-form-item label="" prop="password" v-if="loginType == 1 || loginType == 4">
            <img src="@/assets/img/icon-pwd.png" class="input-icon" alt="" />
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              :show-password="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="" prop="verifyPassword" v-if="loginType == 4">
            <img src="@/assets/img/icon-pwd.png" class="input-icon" alt="" />
            <el-input
              v-model="loginForm.verifyPassword"
              type="password"
              placeholder="请输入确认密码"
              :show-password="true"
            ></el-input>
          </el-form-item>
        </el-form>

        <div class="qrcode-wrapper" v-if="loginType == 3">
          <img src="@/assets/img/qrcode.png" alt="" />
        </div>

        <div class="scan-tip flex-x-center" v-if="loginType == 3">
          请打开微信【扫一扫】
        </div>
        <div class="handle-wrapper flex-x-bet-y-center" v-if="loginType == 1 || loginType == 2">
          <div class="flex-y-center">
            <span v-if="loginType == 1" @click="loginType = 2">验证码登录</span>
            <span v-if="loginType == 2" @click="loginType = 1">密码登录</span>
            <div class="line" v-if="loginType == 1"></div>
            <span v-if="loginType == 1" @click="toForgetPassword">忘记密码？</span>
          </div>
          <span @click="loginType = 3" v-if="loginType != 4">微信扫码登录</span>
        </div>

        <!-- <div class="remerber-pwd flex-y-center" @click="toggleRemerber">
          <img
            :src="require(`@/assets/img/icon-radio-${isRemerber ? '1' : '0'}.png`)"
            class="icon-radio"
            alt=""
          />
          <span>记住密码</span>
        </div> -->

        <el-button
          type="primary"
          size="large"
          class="submit-btn"
          v-if="loginType == 1 || loginType == 2"
          @click="submit"
          >登录</el-button
        >

        <el-button
          type="primary"
          size="large"
          class="submit-btn"
          style="margin-top: 0px"
          v-if="loginType == 4"
          @click="forgetPassword"
          >提交</el-button
        >

        <div class="flex-x-center">
          <router-link
            to="/register"
            class="register-btn"
            v-if="loginType == 1 || loginType == 2"
            >新用户注册</router-link
          >
        </div>
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import LoginHeader from "@/components/LoginHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
import SubmitBtn from "@/components/SubmitBtn.vue";
import { passwordLogin,codeLogin, forgetPassword } from "@/api/user";
import { sendSmsCode } from "@/api/common";
export default {
  name: "Login",
  components: {
    LoginHeader,
    PageFooter,
    SubmitBtn,
  },
  data() {
    return {
      rules: {
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
        verifyPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }]
      },
      loginType: 1, // 1手机号密码 2验证码 3微信扫码 4忘记密码
      loginForm: {
        phone: "",
        password: "",
        code: "",
        verifyPassword: ''
      },
      countdown: 59,
      timer: "",
      isRemerber: false,
    };
  },
  computed: {
    title() {
      let text = "";
      if (this.loginType == 1) {
        return "密码登录";
      } else if (this.loginType == 2) {
        return "验证码登录";
      } else if (this.loginType == 3) {
        return "微信扫码登录";
      } else {
        return "忘记密码";
      }
    },
  },
  methods: {
    toggleRemerber() {
      this.isRemerber = !this.isRemerber;
    },
    toForgetPassword(){
      this.timer && clearInterval(this.timer);
      this.timer = "";
      this.countdown = 59;
      this.loginType = 4
    },
    forgetPassword(){
      this.$refs["form"].validate((valid) => {
        if(valid){
          if(this.loginForm.password !== this.loginForm.verifyPassword){
            return this.$modal.msgError('两次输入密码不一致')
          }
          forgetPassword(this.loginForm).then(res => {
            this.$modal.msgSuccess('密码重置成功')
            setTimeout(() => {
              this.loginType = 1
              clearInterval(this.timer);
            }, 800)
          })
        }
      })
    },
    sendSms() {
      this.$refs.form.validateField("phone", (valid) => {
        if (valid) return
        if (this.timer) return;
          sendSmsCode({
            phone: this.loginForm.phone,
            use: this.loginType == 4 ? 3 : 2,  // 3忘记密码 2 验证码登录
          }).then((res) => {
            this.$modal.msgSuccess('验证码发送成功');
            this.timer = setInterval(() => {
              this.countdown--;
              if (this.countdown < 1) {
                clearInterval(this.timer);
                this.timer = "";
                this.countdown = 59;
              }
            }, 1000);
          });
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 账号密码登录
          if (this.loginType == 1) {
            passwordLogin(this.loginForm).then((res) => {
              this.$store.commit("user/SET_TOKEN", res.result.token);
              this.$store.commit("user/SET_USERINFO", res.result.member);
              this.$modal.msgSuccess("登录成功");
              setTimeout(() => {
                this.$router.replace("/index");
              }, 800);
            });
          }
          // 验证码登录
          else if(this.loginType == 2){
            codeLogin(this.loginForm).then((res) => {
              this.$store.commit("user/SET_TOKEN", res.result.token);
              this.$store.commit("user/SET_USERINFO", res.result.member);
              this.$modal.msgSuccess("登录成功");
              setTimeout(() => {
                this.$router.replace("/index");
              }, 800);
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  justify-content: flex-end;
  width: 100%;
  height: 700px;
  background: url(~@/assets/img/login-bg.png) no-repeat;
  background-size: 100% 100%;

  .login-form {
    width: 520px;
    height: 580px;
    padding: 0 50px;
    background: #ffffff;
    box-shadow: 0px 0px 21px 0.1rem rgba(24, 144, 255, 0.12);
    border-radius: 0px;
    margin-right: 360px;
    box-sizing: border-box;

    .title {
      font-weight: bold;
      font-size: 26px;
      color: #333333;
      padding: 50px 0 50px;
      text-align: center;

      .back {
        cursor: pointer;
      }
    }
  }

  .sms-code-wrapper {
    width: 420px;
    border-radius: 4px;

    ::v-deep .el-input__inner {
      position: relative;
      z-index: 10075;
      width: 420px;
      border: 0;
      border-radius: 0;
    }
    &:has(.el-input__inner:focus) {
      border-color: #fe5a13;
    }

    ::v-deep .el-input__inner {
      width: auto;
    }

    .send-code-btn {
      display: flex;
      align-items: center;
      height: 30px;
      font-weight: 400;
      font-size: 16px;
      color: #fe5a13;
      padding: 0rem 30px;
      border-left: 1px solid #ccc;
      cursor: pointer;
    }
  }

  .handle-wrapper {
    width: 100%;
    margin: 20px auto;
    font-weight: 400;
    font-size: 16px;
    color: #808080;

    span {
      cursor: pointer;
    }

    span:hover {
      text-decoration: underline;
    }

    .line {
      width: 1px;
      height: 12px;
      background: #dbdbdb;
      margin: 0 12px;
    }
  }
}

.qrcode-wrapper {
  margin: 40px auto 20px;
  border-radius: 12px;
  border: 1px solid #cccccc;
  padding: 20px;
  width: 242px;
  height: 242px;

  img {
    width: 242px;
    height: 242px;
  }
}

.scan-tip {
  font-weight: 400;
  font-size: 18px;
  color: #808080;
}

.remerber-pwd {
  cursor: pointer;

  .icon-radio {
    position: relative;
    top: 2px;
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }

  span {
    font-weight: 400;
    font-size: 16px;
    color: #808080;
  }
}

::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 6px;
  width: 420px;
}

::v-deep .el-form-item__label {
  display: none;
}

::v-deep .el-input__inner {
  padding-left: 0;
  border: 0;
  background-color: transparent !important;
  height: 56px;
}

.input-icon {
  width: 26px;
  height: 26px;
  margin: 0 20px;
}

.register-btn {
  cursor: pointer;
  font-weight: 400;
  font-size: 20px;
  color: #fe5a13;
  text-align: center;
  text-decoration: none;
}

.submit-btn {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  margin: 70px 0 30px 0;
  font-size: 20px;
}

::v-deep .el-input {
  font-size: 16px;
}

.disabled {
  color: #d1d1d1;
}
</style>
